<template>
    <div class="banner">
        <swiper class="myBannerPic" ref="myBannerPic" :options="myBannerPicSwiper">
            <swiper-slide v-for="item in bannerList" :key="item.id">
                <a href="javascript:;">
                    <img :src="item.url" :alt="item.title" :title="item.title" />
                </a>
            </swiper-slide>
            <div class="myBannerPicSwiperPagination swiper-pagination" slot="pagination">
            </div>
        </swiper>
    </div>
</template>

<script>
    import {
        Swiper,
        SwiperSlide
    } from 'vue-awesome-swiper';
    import 'swiper/css/swiper.css';

    export default {
        name: 'banner',
        // 接收父级传递过来的数据
        props: {
            'bannerList': {
                type: Array,
                default () {
                    return [];
                }
            }
        },
        watch: {

        },
        created() {

        },
        mounted() {

        },
        data() {
            return {
                myBannerPicSwiper: {
                    // 手滑动轮播图的执行速度
                    speed: 300,
                    // 自动播放
                    autoplay: {
                        // 3秒钟切换一张轮播图
                        delay: 3000,
                        // 如果设置为true，当切换到最后一个slide时停止自动切换，loop为true的情况下无效
                        // stopOnLastSlide: false,
                        // 滑动了之后松手，还会继续轮播属性
                        disableOnInteraction: false
                    },
                    // 控制是否循环轮播
                    loop: true,
                    // 设置轮播点
                    pagination: {
                        // 元素
                        el: '.myBannerPicSwiperPagination',
                        // 循环类型 - 默认
                        type: 'bullets'
                    }
                }
            };
        },
        methods: {

        },
        computed: {
            myBannerSwiper() {
                return this.$refs.myBannerPic.swiper;
            }

        },
        components: {
            Swiper,
            SwiperSlide
        }
    };

</script>

<style lang="scss">
    .myBannerPicSwiperPagination {
        position: absolute;
        left: 0;
        bottom: 0 !important;
        z-index: 99;

        .swiper-pagination-bullet {
            width: 13px;
            height: 13px;
            background-color: #d5fffe;
            border-radius: 10px;
            opacity: 1;
            filter: alpha(opacity=100);
            margin-right: 15px!important;
        }

        .swiper-pagination-bullet-active {
            background-color: #34e8de;
        }
    }

</style>

<style lang="scss" scoped>
    .myBannerPic {
        width: 100%;

        .swiper-slide {
            width: 100%;
            height: auto;

            a {
                display: block;

                img {
                    width: 100%;
                    height: 360px;
                }
            }
        }
    }

</style>
